import { Timeline, Icon } from 'antd';
import { WeaPopoverHrm } from 'ecCom';
import equal from 'deep-equal';
import { toJS } from 'mobx';
import { getLeaveMessage } from '../../apis/mineCustomer';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

class ContacterTrail extends React.Component {
  // shouldComponentUpdate(nextProps,nextState) {
  //     return !equal(this.props.data,nextProps.data)
  // }
  render() {
    const { data } = this.props;
    return (
      <div className="contacter-trail-container">
        <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@sc6tn5`}>
          {this.getTimeLine()}
        </Timeline>
      </div>
    );
  }
  getTimeLine() {
    const { data } = this.props;
    const datas = toJS(data);
    const items = [];
    if (datas.length > 0) {
      datas && datas.map((line, index) => {
        if (index == 0) {
          items.push(
            <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@n14kxm@${index}`} dot={<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@zd45km@${index}`} type="clock-circle-o" className="contacter-trail-dot" style={{ color: '#028102' }} />}>
              <div className="contacter-trail-customer" ><span style={{ color: '#1cbeec' }} dangerouslySetInnerHTML={{ __html: line.hrmLink }} /> <span style={{ color: '#939393', margin: '0 5px' }}>于</span><span style={{ color: '#1cbeec' }}>{line.contactTime}</span> <span style={{ color: '#939393', margin: '0 5px' }}>最后联系</span></div>
            </Timeline.Item>,
          );
        } else {
          items.push(
            <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@b82hgj@${index}`} >
              <div className="contacter-trail-customer" ><span style={{ color: '#1cbeec' }} dangerouslySetInnerHTML={{ __html: line.hrmLink }} /> <span style={{ color: '#939393', margin: '0 5px' }}>于</span><span style={{ color: '#1cbeec' }}>{line.contactTime}</span> <span style={{ color: '#939393', margin: '0 5px' }}>最后联系</span></div>
            </Timeline.Item>,
          );
        }
      });
    } else {
      items.push(
        <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@20yj02@tl`} dot={<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@nj1ylp@tl`} type="clock-circle-o" className="contacter-trail-dot" style={{ color: '#028102' }} />}>
          <div className="contacter-trail-customer" ><span style={{ color: '#1cbeec' }} >{getLabel(84370, '无联系记录!')}</span></div>
        </Timeline.Item>,
      );
    }
    return items;
  }
}

export default ContacterTrail;
